<template>
  <div class="allUser">
    <Card :bordered="false">
      <p slot="title">
        <Row >
          <Col span="4"> 全部账号 </Col>
          <Col span="4" offset="16">
          <Button type="info" style="float: right;">添加</Button>
          </Col>
        </Row>
      </p>
      <p class="searchInput">
        <Row type="flex" justify="end" style="padding:10px 0">
         <Col span="6">
        <Input v-model="searchValue" search enter-button="搜索" placeholder="请输入关键字"></Input>
          </Col>
        </Row>
        <Table border :columns="columns1" :data="data1"></Table>
        <Row type="flex" justify="end" style="padding-top: 10px">
          <Col span="24">
        <Page :total="100" show-total style="float: right;" />
        </Col>
        </Row>
      </p>
    </Card>
    <Card :bordered="false">
      <p slot="title">
        系统管理员
        <Button type="info" style="float:right">添加</Button>
      </p>
      <p class="searchInput">
       <Row type="flex" justify="end" style="padding:10px 0">
         <Col span="6">
        <Input search enter-button="搜索" placeholder="请输入关键字"></Input>
          </Col>
        </Row>
        <Table border :columns="columns2" :data="data2"></Table>
        <Row type="flex" justify="end" style="padding-top: 10px">
          <Col span="24">
        <Page :total="100" show-total style="float: right;" />
        </Col>
        </Row>
      </p>
    </Card>
  </div>
</template>

<script>
  export default {
    name: 'userManagementAll',
   data() {
    return {
      searchValue: 'd33',
      tab0: true,
      tab1: true,
      columns1: [{
          title: "建设单位",
          key: "monad",
          align: "center"
        },
        {
          title: "法人",
          key: "person",
          align: "center"
        },
        {
          title: "联系人",
          key: "contacts",
          align: "center"
        },
        {
          title: "联系电话",
          key: "phone",
          align: "center"
        },
        {
          title: "权限控制",
          key: "jurisdiction",
          align: "center"
        },
        {
          title: "二级账号数量",
          key: "number",
          align: "center"
        },
        {
          title: "使用年限",
          key: "ageLimit",
          align: "center"
        },
        {
          title: "操作",
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button", {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px",
                    color: "#ffffff",
                    background: "#2996ff",
                    border: "none",
                    padding: "0px 5px"
                  },
                  on: {
                    click: () => {
                      this.show(params.index);
                    }
                  }
                },
                "查看"
              ),
              h(
                "Button", {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px",
                    color: "#ffffff",
                    background: "#19be6b",
                    border: "none",
                    padding: "0px 5px"
                  },
                  on: {
                    click: () => {
                      this.show(params.index);
                    }
                  }
                },
                "修改"
              )
            ]);
          }
        }
      ],
      data1: [{
          monad: "某某机构"
        },
        {
          monad: "某某机构"
        },
        {
          monad: "某某机构"
        },
        {
          monad: "某某机构"
        },
        {
          monad: "某某机构"
        },
        {
          monad: "某某机构"
        },
        {
          monad: "某某机构"
        },
        {
          monad: "某某机构"
        },
        {
          monad: "某某机构"
        },
        {
          monad: "某某机构"
        },
        {
          monad: "某某机构"
        },
        {
          monad: "某某机构"
        },
        {
          monad: "某某机构"
        },
        {
          monad: "某某机构"
        }
      ],
      columns2: [{
          title: "职位名称",
          key: "position",
          align: "center"
        },
        {
          title: "姓名",
          key: "name",
          align: "center"
        },
        {
          title: "管理权限",
          key: "jurisdiction",
          align: "center"
        },
        {
          title: "联系电话",
          key: "phone",
          align: "center"
        },
        {
          title: "账号密码",
          align: "center",
          render: (h, params) => {
            return h(
              "Select", {
                props: {
                  value: ""
                },
                on: {
                  "on-change": event => {}
                }
              }, [
                h(
                  "Option", {
                    props: {
                      value: "1"
                    }
                  },
                  "账号：zhangsan"
                ),
                h(
                  "Option", {
                    props: {
                      value: "2"
                    }
                  },
                  "账号：lisi"
                )
              ]
            );
          }
        },
        {
          title: "操作",
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button", {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px",
                    color: "#ffffff",
                    background: "#2996ff",
                    border: "none",
                    padding: "0px 5px"
                  },
                  on: {
                    click: () => {
                      this.show(params.index);
                    }
                  }
                },
                "查看"
              ),
              h(
                "Button", {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px",
                    color: "#ffffff",
                    background: "#19be6b",
                    border: "none",
                    padding: "0px 5px"
                  },
                  on: {
                    click: () => {
                      this.show(params.index);
                    }
                  }
                },
                "修改"
              )
            ]);
          }
        }
      ],
      data2: [{
          position: "系统管理员",
          name: "张三"
        },
        {
          position: "系统管理员",
          name: "张三"
        },
        {
          position: "系统管理员",
          name: "张三"
        }
      ]
    }
  },
  methods: {
    handleTabRemove(name) {
      this['tab' + name] = false;
    }
  },
  }
</script>

<style scoped>
.ivu-card-head p {
  overflow: visible;
}
</style>
